import React, {Component} from 'react';
import {Text, TextInput, TouchableOpacity, View, Alert, StyleSheet, AsyncStorage, FlatList, Image} from 'react-native';
import {BasicStyle} from "../../../style/BasicStyle";
import Spinner from 'react-native-loading-spinner-overlay';
import Toast from '@remobile/react-native-toast';
import FetchUtils from './../../utils/FetchUtils';
import {NavigationActions} from 'react-navigation';
import utils from './../../utils/utils';

export default class MyDedail extends Component {
    static navigationOptions = ({navigation, screenProps}) => ({
        headerTitle: "设置",
        headerStyle: {
            backgroundColor: '#F6F6F6',
        },
        headerTitleStyle: {
            alignSelf: 'center',
            fontSize: utils.setSpText(17),
        },
        headerRight: <TouchableOpacity/>
    });


    render() {
        return (
            <View style={[BasicStyle.containerView, styles.containerView]}>
                <View style={styles.listView}>
                    <TouchableOpacity style={styles.listItemView} onPress={() => {
                        let {navigate} = this.props.navigation;
                        navigate('AddressListNav');
                    }}>
                        <View style={styles.listItemViewView}>
                            <Text style={[BasicStyle.commonFontText, styles.listItemText]}>我的收货地址</Text>
                            <Image style={styles.rightPointImg}
                                   source={require('./../../../img/rightpoint.png')}/>
                        </View>
                    </TouchableOpacity>
                    <View style={BasicStyle.commonLineMarginLeft}/>

                    <TouchableOpacity style={styles.listItemView} onPress={() => {
                        let {navigate} = this.props.navigation;
                        navigate('MyEditListNav');
                    }}>
                        <View style={styles.listItemViewView}>
                            <Text style={[BasicStyle.commonFontText, styles.listItemText]}>修改个人信息</Text>
                            <Image style={styles.rightPointImg}
                                   source={require('./../../../img/rightpoint.png')}/>
                        </View>
                    </TouchableOpacity>
                    <View style={BasicStyle.commonLineMarginLeft}/>

                    <TouchableOpacity style={styles.listItemView}>
                        <View style={styles.listItemViewView}>
                            <Text style={[BasicStyle.commonFontText, styles.listItemText]}>客服电话</Text>
                            <Text
                                style={[BasicStyle.commonFontText, {marginRight: utils.autoWidth(16)}]}>40012341234</Text>
                        </View>
                    </TouchableOpacity>
                    <View style={BasicStyle.commonLineMarginLeft}/>

                    <TouchableOpacity style={styles.listItemView}>
                        <View style={styles.listItemViewView}>
                            <Text style={[BasicStyle.commonFontText, styles.listItemText]}>关于我们</Text>
                            <Image style={styles.rightPointImg}
                                   source={require('./../../../img/rightpoint.png')}/>
                        </View>
                    </TouchableOpacity>
                    <View style={BasicStyle.commonLineMarginLeft}/>

                </View>

                <TouchableOpacity style={styles.exitButStyle} onPress={() => Alert.alert('温馨提醒', '确定退出账号吗?', [
                    {text: '取消'},
                    {
                        text: '确定', onPress: () => this._loginOut()

                    }
                ])}>
                    <Text style={[BasicStyle.commonFontText]}>退出账号</Text>
                </TouchableOpacity>
            </View>
        )
    }

    /*退出登录的方法*/
    _loginOut = () => {
        AsyncStorage.multiRemove(["HXToken", "XToken", "role", "username", "userId", "avatar"]);

        const resetAction = NavigationActions.reset({
            index: 0,
            actions: [
                NavigationActions.navigate({routeName: 'RegisterLoginNav'})
            ]
        });
        this.props.navigation.dispatch(resetAction);
    };
}

const styles = StyleSheet.create({
    containerView: {
        justifyContent: 'space-between'
    },
    listView: {
        marginTop: utils.autoheight(33.5),
        backgroundColor: '#FFF',
    },
    listItemView: {
        height: utils.autoheight(44),
        justifyContent: 'center',
    },
    listItemViewView: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center'
    },
    listItemText: {
        marginLeft: utils.autoWidth(16),
    },
    rightPointImg: {
        marginRight: utils.autoWidth(16),
        width: utils.autoWidth(8),
        height: utils.autoheight(13),
        alignItems: 'center',
        justifyContent: 'center',
    },
    exitButStyle: {
        borderWidth: utils.autoheight(1),
        borderColor: '#F6F6F6',
        height: utils.autoheight(44),
        width: utils.screenWidth,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#ECECEC',
    },
});